<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" ref="filters" :size="size">
        <el-form-item prop="name">
          <el-input v-model="filters.name" clearable placeholder="用户账号"></el-input>
        </el-form-item>
        <el-form-item prop="seller_grade">
          <el-select v-model="filters.seller_grade" clearable placeholder="分销员等级">
            <el-option label="全部" value="全部"></el-option>
            <el-option label="分销员" value="分销员"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
          </el-form-item>
      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
      <el-form :inline="true" :size="size">
        <el-form-item>
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
            <el-tooltip content="导出" placement="top">
              <el-button icon="fa fa-file-excel-o" @click="downloadExcel" id="downloadExcel"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns">
      </table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      :showEditOperation="false"
      :showBatchDelete="false"
      :showOperation="true"
      :showDeleteOperation="false"
      :showSelection="false"
      :showDetailOperation="true"
      @handleDetail="handleDetail"
      @findPage="findPage"
      ref="CyTable"
    ></cy-table>
    <!--详情查看-->
    <el-dialog title="佣金明细" width="60%" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
        <el-form :inline="true" ref="filters" :size="size">
          <el-form-item prop="seller_grade1">
            <el-select v-model="seller_grade1" placeholder="佣金类别">
              <el-option label="全部" value="全部"></el-option>
              <el-option label="佣金提成" value="佣金提成"></el-option>
              <el-option label="邀请奖励" value="邀请奖励"></el-option>
              <el-option label="分销佣金" value=分销佣金></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <!--详情列表-->
      <el-table :data="tableData"
                :size="size"
                style="width:100%;"
                :default-sort = "{prop: 'code,status,deliveryMethod', order: 'descending'}"
                :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
        <el-table-column prop="code" label="入账时间" sortable></el-table-column>
        <el-table-column prop="status" label="业务编号" sortable></el-table-column>
        <el-table-column prop="deliveryMethod" label="账务类型" sortable></el-table-column>
        <el-table-column prop="deliveryMethod1" label="收支金额" sortable></el-table-column>
        <el-table-column prop="deliveryMethod2" label="账户余额" sortable></el-table-column>
      </el-table>
      <!-- 底部-->
      <div class="toolbar" style="padding:10px;">
        <el-pagination
          layout="total, prev, pager, next, jumper,sizes"
          :current-page="pageRequest.pageNum"
          :page-size="pageRequest.pageSize"
          :total="1"
          style="float:right;"
          :page-sizes="[10, 20, 30, 40]"></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import PopupTreeInput from "@/components/PopupTreeInput";
  import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import { format } from "@/utils/datetime";
  export default {
    components: {
      PopupTreeInput,
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        size: "small",
        filters: {
          name: "",
          seller_grade: "",
          t : "sellerCommissionManage"
        },
        tableData: [{
          code: '2019-10-10',
          status: '652620191010',
          deliveryMethod: '652620191010',
          deliveryMethod1: '5000.00',
          deliveryMethod2: '10000.00'
        }],
        seller_grade1: "",
        columns: [
          {prop: "name", label: "分类名称", minWidth: 120},
          {prop: "seller_grade", label: "分类名称", minWidth: 120},
          {prop: "join_time", label: "分类名称", minWidth: 120},
          {prop: "status", label: "分类名称", minWidth: 120},
          {prop: "recievea_ccount", label: "已入账佣金总额", minWidth: 120},
          {prop: "recievea_sale_ccount", label: "已入账分销佣金", minWidth: 120},
          {prop: "recievea_new_ccount", label: "已入账邀新奖金", minWidth: 120},
          {prop: "unrecievea_sale_ccount", label: "未入账分销佣金", minWidth: 120},
          {prop: "unrecievea_new_ccount", label: "未入账邀新奖金", minWidth: 120},
        ],
        dialogVisible: false,
        filterColumns: [],
        pageRequest: { pageNum: 1, pageSize: 10 },
        pageResult: {},
      };
    },
    methods: {
      // 获取分页数据
      findPage: function(data) {
        this.$refs.CyTable.findPage(this.filters);
      },
      //列表下载
      downloadExcel() {
        this.$confirm("确定下载列表文件?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let filename = "分销员佣金管理";
            this.$refs.CyTable.exportData(
              this.filters,
              this.filterColumns,
              filename
            );
          })
          .catch(() => {});
      },
      // 详情
      handleDetail: function(data) {
        this.dialogVisible = true;
        this.dataForm = data.row;
      },
      // 时间格式化
      dateFormat: function(row, column, cellValue, index) {
        return format(row[column.property]);
      },
      // 处理表格列过滤显示
      displayFilterColumnsDialog: function() {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true);
      },
      // 处理表格列过滤显示
      handleFilterColumns: function(data) {
        this.filterColumns = data.filterColumns;
        this.$refs.tableColumnFilterDialog.setDialogVisible(false);
      },
      // 处理表格列过滤显示
      initColumns: function() {
        var temp = [];
        $.each(this.columns, function(key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      },
      //重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.findPage();
      }
    },
    mounted() {
      this.initColumns();
    }
  };
</script>

<style scoped>
  /deep/ .el-input__inner   {
    width: 200px !important;
  }
</style>
